<template>
    <div class="app-container">
      <el-form
        :model="formInline"
        class="form-inline"
        ref="form"
        label-width="70px"
      >
        <el-row :gutter="4">
          <el-col :lg="6" :xl="4"
            ><el-form-item label="保单号" style="width: 100%">
              <el-input
                v-model="formInline.insureNum"
                placeholder="保单号"
              ></el-input> </el-form-item
          ></el-col>
          <el-col :lg="6" :xl="4"
            ><el-form-item label="订单编号" style="width: 100%">
              <el-input
                v-model="formInline.orderNum"
                placeholder="订单编号"
              ></el-input> </el-form-item
          ></el-col>
          <el-col :lg="6" :xl="4"
            ><el-form-item label="报案号" style="width: 100%">
              <el-input
                v-model="formInline.reportNum"
                placeholder="报案号"
              ></el-input> </el-form-item
          ></el-col>
          <el-col :lg="6" :xl="4">
            <!-- <el-form-item> -->
            <el-button type="primary" icon="el-icon-search" @click="getTableData">搜索</el-button>
            <!-- </el-form-item> -->
          </el-col>
        </el-row>
      </el-form>
      <el-table
        ref="table"
        :data="tableData"
       
      >
        <el-table-column align="center" prop="insureNum" label="开户名称" width="180">
        </el-table-column>
        <el-table-column align="center" prop="boxNo" label="账户类型" width="180">
        </el-table-column>
        <el-table-column align="center" prop="reportStatus" label="地区">
        </el-table-column>
        <el-table-column align="center" prop="bankBranchName" label="开户银行">
        </el-table-column>
        <el-table-column align="center" prop="bankBranchName" label="分支行名称"> </el-table-column>
        <el-table-column align="center" prop="goodsName" label="卡号"> </el-table-column>
        <el-table-column align="center" prop="creatTime" label="联系方式"> </el-table-column>
        <el-table-column align="center" prop="creatTime" label="证件号码"> </el-table-column>
        <!-- <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="text"
              icon="el-icon-view"
              @click="view(scope.row)"
              >查看</el-button
            >
          </template>
        </el-table-column> -->
      </el-table>
      <el-pagination
        style="margin-top: 20px"
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="page.pageNum"
        :page-sizes="[10, 20, 50]"
        :page-size="page.pageSize"
        layout="->, total, sizes, prev, pager, next, jumper"
        :total="page.total"
      >
      </el-pagination>
      <view-or-examine ref="viewOrExamine"></view-or-examine>
    </div>
  </template>
  <script>
  import viewOrExamine from "./viewOrExamine.vue";
  
  export default {
    components: { viewOrExamine },
    data() {
      return {
        page: {
          pageNum: 1,
          pageSize: 10,
          total: 0,
        },
        formInline: {
          user: "",
          region: "",
        },
        tableData: [],
        tableHeight: 0,
      };
    },
    methods: {
      handleSizeChange(val) {
        this.page.pageSize = val;
        this.getTableData();
      },
      handleCurrentChange(val) {
        this.page.pageNum = val;
        this.getTableData();
      },
    //   view(row) {
    //     this.$refs.viewOrExamine.dialogFormVisible = true;
    //     this.$refs.viewOrExamine.title = "查看";
    //     this.$refs.viewOrExamine.isExamine = false;
    //     this.$refs.viewOrExamine.row = row;
    //   },
      setTableHeight() {
        this.$nextTick(() => {
          const queryConditionHeight = this.$refs.form.$el.offsetHeight;
          this.tableHeight =
            window.innerHeight - queryConditionHeight - 180 + "px";
        });
      },
      getTableData() {
        const params = {
          ...this.form,
          pageNum: this.page.pageNum,
          pageSize: this.page.pageSize,
        };
        this.$get("/config/bankbranch/list", params).then((res) => {
          this.tableData = res.rows;
          this.page.total = res.total;
        });
      },
    },
    mounted() {
      window.onresize = () => {
        this.setTableHeight();
      };
      this.setTableHeight();
      this.getTableData();
    },
  };
  </script>
  <style scoped lang="scss">
  .form-inline ::v-deep {
    width: 100%;
  
    .el-form-item__label {
      // padding: 0;
    }
  }
  </style>
  